<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="keywords" content="数码影音，beats耳机，击音耳机，漫步者，akg，潮牌，T恤，音乐生活，食品，服饰配件，礼品，礼物，礼盒，鲜花，ip周边，云音乐，商城，云贝">
   <meta name="description" content="云音乐商城是专注于音乐场景打造的音乐购物平台，包含音乐人周边、3c影音数码、音乐市集等，和我们一起让音乐购有趣，给生活加点料">
   <title>云音乐商城 - 音乐购有趣</title>
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
   <link rel="stylesheet" href="./css/base.css">
   <link rel="stylesheet" href="./css/footer.css">
</head>

<body>

   <!-- 网页底部 -->
   <div class="f-updown">
      <!-- 锁 -->
      <div class="locks">
         <div class="lock">
            <a href="#" class="button"></a>
         </div>
         <div class="lock-right"></div>
      </div>
      <!-- 背景图 -->
      <div class="background"></div>
      <div class="hand"></div>
      <!-- 播放部分 -->
      <div class="f-play-music">
         <div class="btns">
            <a href="#" class="prev"></a>
            <a href="#" class="play"></a>
            <a href="#" class="next"></a>
         </div>
         <div class="def-cover">
            <img src="./images/default_album.jpg" alt="">
            <a href="#"></a>
         </div>
         <div class="play-process">
            <div class="words"></div>
            <div class="pbar">
               <div class="barbg">
                  <div class="ready"></div>
                  <div class="curser">
                     <span class="btn"></span>
                  </div>
               </div>
               <span class="time">
                  <em>00:00</em>
                  / 00:00
               </span>

            </div>
         </div>
         <!-- 收藏分享部分 -->
         <div class="operations">
            <a href="#" class="icn icn-pip"></a>
            <a href="#" class="icn icn-add"></a>
            <a href="#" class="icn icn-share"></a>
         </div>
         <div class="controls">
            <!-- 音量控制按键 -->
            <a href="#" class="icn volume"></a>
            <div class="m-vol">
               <div class="barbg"></div>
               <div class="vbg">
                  <div class="curr"></div>
                  <span class="btn"></span>
               </div>
            </div>
            <!-- 播放方式 -->
            <a href="#" class="icn mode"></a>
            <div class="modetip">随机</div>
            <!-- 播放列表 -->
            <span class="add">
               <a href="#" class="icn list"></a>
            </span>
            <div class="f-playlist">
               <div class="listhd">
                  <h4>播放列表（0）</h4>
                  <a href="#" class="addall">
                     <span></span>
                     收藏全部
                  </a>
                  <span class="line"></span>
                  <a href="#" class="clear">
                     <span></span>
                     清除
                  </a>
                  <span class="f-close"></span>
               </div>
               <div class="listbd">
                  <div class="listmsk">
                     <div class="msk">
                        <i></i>
                        你还没有添加任何歌曲
                        <br>
                        去首页发现音乐，或在我的音乐收听自己收藏的歌单。
                     </div>
                  </div>
                  <div class="bline"></div>
                  <div class="ask">
                     <a href="#"></a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <script>
      //阻止所有的a刷新界面
      const as=document.querySelectorAll('.f-updown a')
      for (let i=0;i<as.length;i++) {
         as[i].addEventListener('click',function(e) {
         e.preventDefault()
      })
      }
      //底部显示隐藏
      const hand = document.querySelector('.f-updown')
      const lock = document.querySelector('.lock a')
      let flag=true
      hand.addEventListener('mouseenter', function () {
         document.querySelector('.f-updown').style.bottom = 0
      })
      function fn() {
         document.querySelector('.f-updown').style.bottom = '-45px'
      }
      hand.addEventListener('mouseleave', fn)
      //锁
      lock.addEventListener('click',function() {
         flag=!flag
         if (flag) {
            lock.classList.remove('lockdown')
            hand.addEventListener('mouseleave', fn)
         } else {
            lock.classList.add('lockdown')
            document.querySelector('.f-updown').style.bottom = 0
            hand.removeEventListener('mouseleave', fn)
         }
         
      })
      //播放按钮切换
      const play=document.querySelector('.btns .play')
      play.addEventListener('click',function() {
         flag=!flag
         if(flag) {
            play.classList.add('palse')
         } else {
            play.classList.remove('palse')
         }
      })
      //音量
      const vol=document.querySelector('.volume')
      vol.addEventListener('click',function() {
         flag=!flag
         if(flag) {
            document.querySelector('.m-vol').style.display='block'
         } else {
            document.querySelector('.m-vol').style.display='none'
         }
      })
      const vbtn=document.querySelector('.vbg .btn')
      const vcur=document.querySelector('.vbg .curr')
      vbtn.addEventListener('mousedown',function(e) {
         e=e||window.e
         const progressLeft=e.clientX-this.offsetLeft
         vbtn.addEventListener('mousemove',function(e) {
            e=e||window.e
            const progressX=e.clientX-progressLeft
            if (progressX<=0) {
               progressX=0
            } else if(progressX>=93) {
               progressX=93
            }
         })
      })
      vbtn.addEventListener('mouseup',function(e){
                    event = event || window.event;
                    vbtn.onmousemove = null;
                    vbtn.onmouseup = null;
                })

      //随机播放
      const mode=document.querySelector('.mode')
      const playmode=['随机','单曲循环','循环']
      let f=0
      mode.addEventListener('click',function() {
         if(f>2) f=0
         document.querySelector('.modetip').style.display='block'
         document.querySelector('.modetip').innerHTML=playmode[f]
         if (f===0) {
            document.querySelector('.mode').classList.remove('mode1')
            document.querySelector('.mode').classList.remove('mode2')
         }
         if (f===1) {
            document.querySelector('.mode').classList.add('mode1')
         }
         if (f===2) {
            document.querySelector('.mode').classList.add('mode2')
         }
         f++
      })
      mode.addEventListener('mouseleave',function() {
         document.querySelector('.modetip').style.display='none'
      })
      //播放列表
      const clos=document.querySelector('.f-close')
      clos.addEventListener('click',function() {
         document.querySelector('.f-playlist').style.display='none'
      })
      const showadd=document.querySelector('.controls .add')
      showadd.addEventListener('click',function() {
         flag=!flag
         document.querySelector('.f-playlist').style.display=flag?'block':'none'
      })


     

   </script>
</body>

</html>